<template>
	<view class="select-aunt">
		<view class="aunt-top w" style="
        background-image: linear-gradient(#ffeaeb, #f8f8f8);
        height: 516rpx;
        overflow: hidden;
      ">
			<view class="mt60 pb35">
				<u-navbar :bgColor='bgColor' :title="title" :autoBack="true">
				</u-navbar>
			</view>
			<view class="fz44 fw" style="color: #3b0000; margin-top: 100rpx; margin-left: 48rpx">严选阿姨标准定价</view>
			<view class="fz28 p_ab" style="color: #866162; margin-top: 4rpx; margin-left: 48rpx">说出您的需求，马上看阿姨</view>
			<image class="p_ab" src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/2a416e2935acb4792164a15adf7507fb.png"
				style="width: 356rpx; height: 208rpx; top: 188rpx; left: 394rpx" mode="aspectFill"></image>
		</view>
		<view class="aunt-type bac_f bs6 radius16 ml24 mr24" style="overflow: hidden; margin-top: -140rpx">
			<view class="mt34 dis_flex">
				<text class="fz34 fw tf_222 ml40">您想找哪种阿姨？</text>
				<view class="dis_f mr30" @click="accurateFilter">
					<image class="w18 h20" style="margin-right: 6rpx" src="../../static/image/shaixuan-icon.png"
						mode="aspectFill"></image>
					<text class="fz24 tf_666">精选筛选</text>
				</view>
			</view>
			<view class="ml30 mr30 mt10 dis_f fww jcsb">
				<view class="w200 h116 bac_f8 radius8 dfd_c mt20 jc ac bz" v-for="(item, i) in nanny_list" :key="i"
					@click="nunnyClick(i)" :class="{ active: c_nanny_id == item.id }">
					<view class="fz28 fw tf_222">{{ item.value }}</view>
					<view class="fz22 tf_999">{{ item.value2 }}</view>
				</view>
			</view>
			<view class="radius8 ml30 mr30 pt24 pl30 pr30 pb30 mt34" style="background-color: #f4f5f7">
				<view class="tf_999 fz26">服务城市(放心填写，我们会保护您的安全信息</view>
				<view class="dis_flex mt16" @click="selectCity">
					<text class="fz36 fw tf_22">{{ current_city }}</text>
					<image class="w16" style="height: 28rpx" src="../../static/image/icon-navbar.png" mode="aspectFill">
					</image>
				</view>
			</view>
			<view class="ml30 mt34">
				<view class="fz26 fw tf_22">
					精准需求
				</view>
				<view class="mt10 dis_f fww">
					<view class="border12 w160 dis_f jc mr20 mt10 fz22 radius8" style="height: 52rpx;" v-for="(item,index) in need" :key="index">
						{{item}}
					</view>
				</view>
			</view>
			<view class="btn ml30 mr30 radius8 mt30 tf h88 dis_f jc fz32 mb40" @click="lookAunt">帮我找育儿嫂</view>
		</view>
		<!-- 选项卡 -->
		<view class="w" id="scrollView" :class="{'fixed':istop}" :style="istop==1 ? `margin-top:${statusHeight}` :''">
			<view class="w auto">
				<u-tabs :list="tabs" disabled="true" :current='current' lineWidth="20" @click="tabClick" lineHeight="7" :scrollable="false"
					:lineColor="`url() 100% 100%`"
					:activeStyle="{
            color: '#222',
            fontWeight: '600',
            fontSize: '15',
          }" :inactiveStyle="{
            color: '#999',
          }"></u-tabs>
			</view>
		</view>
		<!-- 服务信息 -->
		<view class="sever-info bac_f mt20 mr24 ml24">
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/c5ba0b8925960b25d62d7021ad726bc0.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/3daf15ca3874567d84bb185cac35da76.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/881be9a6b5ec32875fe4df0c442bd329.png" class="w" mode="widthFix"></image>
			<image src="https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221019/c39276fb68cfc154f05ea0574a6ff9ef.png" class="w" mode="widthFix"></image>
		</view>
		<!-- 城市选择器 -->
		<u-picker :show="city_show" @cancel="city_show = false" confirmColor="#f14537" cancelColor="#f14537" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler">
		</u-picker>
		<!-- 弹出窗 -->
		<u-popup :show="accuratePopshow" mode="bottom" @close="accuratePopshow = false" :round="8">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx">
					<text class="fz34 tf33 ml238">精确筛选</text>
					<image @click="accuratePopshow = false" class="w44 ml238" src="../../static/image/server_close.png"
						mode="widthFix"></image>
				</view>
				<view class="">
					<view class="mt34 fz26 tf_999 ml40">您主要需要阿姨做什么？（可多选）</view>
					<view class="mt24 ml30 dis_flex mr30">
						<view class="bac_f8 h80 dis_f bz jc fz28 radius6" style="width: 216rpx"
							v-for="(item, i) in nanny_list_s" :key="i"
							:class="{ active: c_nanny_list_s.indexOf(i) != -1 }" @click="nunnyClickS(i)">
							{{ item.value }}</view>
					</view>
					<view class="mt40 fz26 tf_999 ml40">您对阿姨还有哪些要求？（选填）</view>
					<view class="mt4 ml30 dis_f jcsb mr30 fww">
						<view class="bac_f8 mt20 fz28 h80 bz dis_f jc radius6" style="width: 216rpx"
							v-for="(item, i) in nanny_list_t" :key="i"
							:class="{ active: c_nanny_list_t.indexOf(i) != -1 }" @click="nunnyClickT(i)">
							{{ item.value }}</view>
						<view class="bac_f8 mt20 fz28 bz h80 dis_f jc radius6" style="width: 216rpx"
							v-for="index of 9 - nanny_list_t.length" :key="index"></view>
					</view>
				</view>
				<view v-show="textarea" class="mr30 ml30 mt24">
					<uni-easyinput autoHeight type="textarea" v-model="otherTextarea" placeholder="例如希望阿姨性格如何、阿姨籍贯要求等等">
					</uni-easyinput>
				</view>
				<view class="btn ml30 mr30 radius8 mt48 tf h88 dis_f jc fz32 mb40" @click="confirmInfo">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getNannyInfo,
		getNannyInfoS,
		getNannyInfoT,
		getCityInfo,
		getStreetInfo,
		submitAuntInfo,
	} from "@/config/api.js";
	export default {
		data() {
			return {
				title:' ',
				statusHeight:'',
				current:0,
				need:[],
				textarea:false,
				bgColor:"rgba(255,255,255,0)",
				current_city: "太原市 小店区",
				city_show: false,
				columns: [],
				columnData: [],
				c_nanny_id: "", //当前保姆筛选项
				c_nanny_list_s: [],
				c_nanny_list_t: [],
				nanny_list: [], //保姆筛选项
				nanny_list_s: [], //弹出框保姆筛选
				nanny_list_t: [],
				myScroll: "", //菜单栏距离top
				istop: 0, //判断是否显示
				otherTextarea: "",
				accuratePopshow: false,
				tabs: [{
						name: "服务详情"
					},
					{
						name: "服务保障"
					},
					{
						name: "服务流程"
					},
					{
						name: "常见问题"
					},
				],
			};
		},
		onLoad() {
			let res = wx.getSystemInfoSync();
			this.statusHeight = res.statusBarHeight + 44 + 'px';
			this.getNannyInfo();
			this.getCityInfo();
		},
		mounted() {
			console.log("页面挂在完毕");
			const query = uni.createSelectorQuery().in(this);
			query
				.select("#scrollView")
				.boundingClientRect((data) => {
					console.log("布局位置信息", JSON.stringify(data));
					console.log("节点离页面顶部的距离" + data.top);
					this.myScroll = data.top;
				})
				.exec();
		},
		onPageScroll: function(e) {
			this.bgColor = '#fff';
			if (e.scrollTop == 0) {
				this.bgColor = 'rgba(255,255,255,0)';
				this.title = ' '
			}else{
				this.title = '保姆月嫂'
			}
			if (e.scrollTop > this.myScroll) {
				this.istop = 1;
			} else {
				this.istop = 0;
			}
		},
		methods: {
			// 滚动固定位置
			tabClick(item) {
				console.log(item);
				if (item.index == 0) {
					uni.pageScrollTo({
						scrollTop: 500,
						duration: 300
					});
				} else if(item.index==1) {
					this.current =1
					uni.pageScrollTo({
						scrollTop: 1100,
						duration: 300
					});
				}else if(item.index==2){
					this.current =2
					uni.pageScrollTo({
						scrollTop: 1500,
						duration: 300
					});
				}else{
					this.current =3
					uni.pageScrollTo({
						scrollTop: 1750,
						duration: 300
					});
				}
			},
			//获取城市信息
			getCityInfo() {
				getCityInfo().then((res) => {
					this.columns = res;
				});
				getStreetInfo().then((res) => {
					this.columnData = res;
				});
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker,
				} = e;
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index]);
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log("confirm", e);
				this.city_show = false;
				this.current_city = `${e.value[0]} ${e.value[1]}`;
			},

			//选择城市
			selectCity() {
				this.city_show = true;
			},
			//提交选择保姆
			lookAunt() {
				if(this.c_nanny_id){
					let phone = "18434660717";
					let option1 = this.nanny_list[this.c_nanny_id - 1].value;
					let option2 = [];
					this.c_nanny_list_s.forEach((v, i) => {
						option2.push(this.nanny_list_s[v].value);
					});
					let area = this.current_city.replace(" ", "/");
					let option3 = [];
					this.c_nanny_list_t.indexOf(7)==-1?'':this.c_nanny_list_t.splice(this.c_nanny_list_t.indexOf(7),1)
					this.c_nanny_list_t.forEach(v=>{
						option3.push(this.nanny_list_t[v].value);
					})
					this.need = option2.concat(option3)
					console.log(this.need);
					let option_s2 = option2.toString()
					let option_t3 = option3.toString()
					submitAuntInfo({
						option1: option1,
						option2: option_s2,
						option3: option_t3,
						phone: phone,
						area: area,
						text:this.otherTextarea,
					}).then((res) => {
						uni.showModal({
							title: "提示",
							content: "提交成功，我们会有客服联系您",
						});
					});
				}else{
					uni.showModal({
						title: "提示",
						content: "请选择您想要找那种阿姨",
					});
				}

			},
			//确认信息
			confirmInfo(){
				this.accuratePopshow = false
				let option2 = [];
				this.c_nanny_list_s.forEach((v, i) => {
					option2.push(this.nanny_list_s[v].value);
				});
				let area = this.current_city.replace(" ", "/");
				let option3 = [];
				this.c_nanny_list_t.indexOf(7)==-1?'':this.c_nanny_list_t.splice(this.c_nanny_list_t.indexOf(7),1)
				this.c_nanny_list_t.forEach(v=>{
					option3.push(this.nanny_list_t[v].value);
				})
				this.need = option2.concat(option3)
			},
			//点击筛选阿姨
			nunnyClick(i) {
				this.c_nanny_id = this.nanny_list[i].id;
				console.log(this.c_nanny_id);
			},
			//点击选择下拉框筛选项
			nunnyClickS(i) {
				if (this.c_nanny_list_s.indexOf(i) == -1) {
					console.log(i); //打印下标
					this.c_nanny_list_s.push(i); //选中添加到数组里
				} else {
					this.c_nanny_list_s.splice(this.c_nanny_list_s.indexOf(i), 1); //取消
				}
				
			},
			nunnyClickT(i) {
				if (this.c_nanny_list_t.indexOf(i) == -1) {
					console.log('选项3',i); //打印下标
					this.c_nanny_list_t.push(i); //选中添加到数组里
					this.c_nanny_list_t.indexOf(7)==-1?this.textarea=false:this.textarea=true
				} else {
					this.c_nanny_list_t.splice(this.c_nanny_list_t.indexOf(i), 1); //取消
					this.c_nanny_list_t.indexOf(7)==-1?this.textarea=false:this.textarea=true
				}
			},
			//精确筛选
			accurateFilter() {
				this.accuratePopshow = true;
				getNannyInfoS().then((res) => {
					console.log(res);
					this.nanny_list_s = res;
				});
				getNannyInfoT().then((res) => {
					console.log(res);
					this.nanny_list_t = res;
				});
			},
			//保姆信息
			getNannyInfo() {
				getNannyInfo().then((res) => {
					console.log(res);
					this.nanny_list = res;
				});
			},
		},
	};
</script>

<style lang="scss">
	.active1 {
		border: 1px solid #f14537;
		background-color: rgba(241, 69, 55, 0.05);
	}

	.active {
		border: 1px solid #f14537;
		color: #f14537;
		background-color: rgba(241, 69, 55, 0.05);
	}

	.select-aunt {
		.aunt-top {
			.top-nav-bar {}
		}
	}
	.fixed {
		position: fixed;
		top: 0rpx;
		z-index: 10;
		background-color: #fff;
	}
</style>
